<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p>
                姓名:
                <input type="text" v-model="name" />
            </p>
            <p>
                城市:{{cityName}}
                <select v-model="cityName">
                    <!-- <option value="">请选择</option> -->
                    <option v-for="item in city" :value="item.val" :key="item.val">
                        {{item.cityName}}
                    </option>
                    <!-- <option value="nc">南昌</option>
                    <option value="ga">高安</option>
                    <option value="ja">吉安</option>
                    <option value="ny">南阳</option>
                    <option value="yc">宜春</option> -->
                </select>
            </p>
        </div>
        <script>
            let vm = new Vue({
                el: '#app',
                data() {
                    return {
                        name: '',
                        city: [
                            { val: '', cityName: '请选择' },
                            { val: 'nc', cityName: '南昌' },
                            { val: 'ga', cityName: '高安' },
                            { val: 'ja', cityName: '吉安' },
                            { val: 'ny', cityName: '南阳' },
                            { val: 'yc', cityName: '宜春' },
                        ],
                        cityName: '',
                    };
                },
                methods: {},
                watch: {
                    name(val) {
                        if (val === '熊') {
                            this.cityName = 'nc';
                        } else {
                            this.cityName = '';
                        }
                    },
                },
            });
        </script>
    </body>
</html>
